<template>
    <div>
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item v-for="(value, key, index) in breadCrumbData" :key="index" :to="{ path: '/' }">{{ value
            }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
const route = useRoute()

// 面包屑
const breadCrumbData = ref([])
const getbreadCrumbData = () => {
    breadCrumbData.value = route.meta
}
// 监听路由,动态渲染面包屑
watch(route, () => {
    getbreadCrumbData()
}, { immediate: true })
// 面包屑


</script>

<style lang="scss" scoped>
.breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;

    ::v-deep .no-redirect {
        color: #97a8be;
        cursor: text;
    }
}
</style>